<template>
  <div>
    <navi title="安全设置" back="1"></navi>
    <div class="item" @click="data.showPwdView=true">
      <div class="left">修改密码</div>
      <div class="right">
        <img src="@/assets/back.png" style="transform:rotate(180deg)" alt="" srcset="">
      </div>
    </div>
    <div class="pwdView" v-show="data.showPwdView" >
      <navi title="修改密码" back="1" :fn="back"></navi>
      <input type="text" placeholder="请输入旧密码" v-model="data.oldPwd">
      <input type="password" placeholder="请输入新密码" v-model="data.newPwd">
      <input type="password" placeholder="请确认新密码" v-model="data.confirmPwd">
      <div class="btnView" @click.stop="submit">
        确定
      </div>
		</div>
  </div>
</template>
<script setup>
import navi from '@/components/navigatebar.vue'
import {reactive,getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance()
const data=reactive({
  showPwdView:false,
  oldPwd:'',
  newPwd:'',
  confirmPwd:''
})
const submit=()=>{
  console.log(data)
  proxy.$ajax.get('changePwd',data,success=>{

  },err=>{
    
  })
}
const back=()=>{
  data.showPwdView=false
}
</script>
<style lang='less' scoped>
  .item{
        width: 100%;
    height: 100rem;
    font-size: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60rem;
    img{
      width: 40rem;
      height: 40rem;
    }
  }
  .pwdView{
    position: fixed;
    top: 0;
    left: 0;
    width: 750rem;
    height: 100vh;
    position: fixed;
    background: #fff;
    padding-bottom: 30vh;
    z-index: 10;
    input{
      width: 80%;
    height: 6vh;
    margin: 20rem;
    background: #f8f8f8;
    padding: 0 20rem;
    border-radius: 20rem;
    }
    .btnView{
      width: 640rem;
      height: 80rem;
      background: rgb(3, 203, 253);
      border-radius: 68rem;
      box-shadow: 4rem 4rem 18rem 0rem rgba(3, 203, 253, 0.35);
      margin: 560rem auto 0;
      font-size: 32rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 80rem;
    }
  }
</style>